<template>
    <div class='component-loading-more'>
        <slot></slot>
    </div>
</template>

<script>
    import { allApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff } from '../utils/utils'

    export default {
        props:{
            value:{
                type: Boolean,
                default: true
            },
            wrapperBox:{
                type: String,
                default: '',
            },
            wrapper:{
                type: String,
                default: '',
            },
            show:{
                type: Boolean,
                default: true,
            },
            url:{
                type: String,
                default: '',
            },
            params:{
                type: Object,
                default: ()=>{
                    return {}
                }
            },
        },
        computed:{
            scrollWrapper(){
                return this.wrapperBox || '.component-loading-more'
            }
        },
        data() {
            return {
                records:[],
                list:{},
                num:1,
            }
        },
        methods:{
            getList(){
                this.$emit('input',true)
                allApi.getList(this.url,_.assign({
                    pageSize:20,
                    pageNo:this.num
                },this.params))
                .then(result=>{
                    this.$emit('input',false)
                    this.list = result
                    if(result.records){
                        this.records = _.concat(this.records, result.records)
                    }
                    this.$emit('finish',this.records)
                    if(result.totalPage == 1){
                        this.$emit('complete')
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.$emit('input',false)
                })
            }
        },
        mounted(){
            this.getList()
            this.$nextTick(()=>{
                scrollLoading(this.wrapper,this.scrollWrapper,()=>{
                    if(!this.show) return
                    // console.log(1)
                    if(this.list.totalPage == this.num){
                        // scrollLoadingOff(this.scrollWrapper)
                        this.$emit('complete')
                        return
                    }

                    if(this.value) return
                    this.num = this.num + 1
                    this.getList()
                })
            })
        },
        destroyed(){
            scrollLoadingOff(this.scrollWrapper)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-loading-more{
        position: relative;
    }
</style>


